<template>
  <view>
    <fu-custom bgColor="bg-white" :isBack="true" :isBottom="true">
      <block slot="content">选择位置</block>
    </fu-custom>
    <view class="container1">
      <view class="bg-white top-box">
        <view class="inputs">
          <image src="https://aijialianmeng.oss-cn-beijing.aliyuncs.com/searchindex.png" mode=""></image>
          <input class="inputaty" type="text" v-model="keyword" placeholder="请输入城市" placeholder-class="placesty"
            @confirm="handleInput" @input="handle" confirm-type="search" />
        </view>
        <!-- <view class="text-333 text-lg search-top">不显示位置</view> -->
      </view>
      <view class="container-one">
        <view class="container-two">
          <view class="text-xs text-999">当前位置</view>
          <view class="flex justify-between weizhi-box">

            <view class="text-df text-333 weizhi" @click="confrim(positions)">{{positions.text}}</view>
            <view class="text-df text-white weizhi1" @click="relocate">重新定位</view>
          </view>
        </view>
      </view>
      <view class="bg-white choose-box">
        <smh-address-indexed v-if="!keyword" :letter="'A'" :list="list" @confirm="confrim"></smh-address-indexed>
        <smh-address-indexed v-else :letter="letter" :list="listA" @confirm="confrim"></smh-address-indexed>
      </view>
    </view>
  </view>
</template>

<script>
  import typedata from '@/components/smh-address-indexed/gettype.js'
  import smhAddressIndexed from '@/components/smh-address-indexed/smh-address-indexed.vue';
  import amap from '@/libs/amap-wx.js'
  // import QQMapWX from '@/pages/yonghu/wode/components/qqmap-wx-jssdk1.2/qqmap-wx-jssdk.min.js'
  export default {
    components: {
      smhAddressIndexed
    },
    data() {
      return {
        amapPlugin: null, //new地图
        keyword: '',
        list: [],
        listA: [],
        type: '',
        positions: {
          text: '',
          lng: '',
          lat: ''
        },
        hisstorydata: [],
        letter: '',
        key: '948a6ee9f2f971b1e4893eb09f7244ab',
        into: ''
      }
    },
    onLoad(options) {
      let that = this
      if (options.into) {
        that.into = options.into
      }
      that.list = typedata
      if (uni.getStorageSync('hisstorydata')) {
        that.hisstorydata = JSON.parse(uni.getStorageSync('hisstorydata'))
      }
      that.amapPlugin = new amap.AMapWX({
        key: that.key
      });
      that.relocate()
    },
    methods: {
      relocate() {
        let that = this
        that.$api.get(global.apiUrls.geocodeRegeo, {
          longitude: that.positions.lng || 108.949538,
          latitude: that.positions.lat || 34.339721
        }).then(ress => {

          if (ress.data.code == 0) {
            console.log('////', ress.data.data.regeocode.addressComponent.city)
            that.positions.text = ress.data.data.regeocode.addressComponent.city
            that.positions.code = ress.data.data.regeocode.addressComponent.adcode
            console.log('addr', that.positions);
          }
        })
        return;
        uni.showModal({
          title: '提示',
          content: '用于获取周边信息',
          success: function(res1) {
            if (res1.confirm) {
              uni.getLocation({
                type: 'gcj02',
                geocode: true,
                success: (res) => {
                  console.log(';;;;;;;;', that.positions.lng, that.positions.lat)
                  that.positions.lat = res.latitude;
                  that.positions.lng = res.longitude;
                  that.$api.get(global.apiUrls.geocodeRegeo, {
                    longitude: that.positions.lng || 108.949538,
                    latitude: that.positions.lat || 34.339721
                  }).then(ress => {

                    if (ress.data.code == 1) {
                      that.positions.text = ress.data.data.text
                      that.positions.code = ress.data.data.code
                    }
                  })
                  console.log('addr', that.positions);
                },
                complete: (complete) => {
                  console.log('complete', complete);
                }
              });
            }
          }
        })

      },
      // 清空
      clearhist() {
        this.hisstorydata = []
        uni.setStorageSync('hisstorydata', JSON.stringify(this.hisstorydata))
      },
      // 删除单个历史记录
      removeHistory(keyword) {
        console.log('删除历史搜索', keyword);
        this.hisstorydata = this.hisstorydata.filter(ele => ele.text != keyword);
        uni.setStorageSync('hisstorydata', JSON.stringify(this.hisstorydata));
      },
      handleInput() {
        // console.log('11111')
        let that = this
        for (let item of that.list) {
          for (let items of item.citylist) {
            if (items.text == that.keyword) {
              this.letter = item.letter
              that.listA = [{
                letter: item.letter,
                citylist: [{
                  "code": items.code,
                  "text": items.text,
                  "provinceCode": items.provinceCode,
                  "province": items.province,
                  "lat": items.lat,
                  "lng": items.lng
                }]
              }]
              console.log(';;;', that.listA)
            }
          }
        }
      },
      handle() {
        if (!this.keyword) {
          this.list = typedata
        }
      },
      confrim(e) {
        console.log('132456789')
        if (this.into) {
          uni.$emit('city', e)
        } else {
          uni.setStorageSync('cityinfo', JSON.stringify(e))
        }


        // console.log(this.$pre.prePage.city)
        uni.navigateBack();
        // uni.navigateTo({
        //   url: '/pages/tabbar/home/home'
        // })
      }
    }
  }
</script>

<style lang="scss">
  .container1 {
    width: 100%;
    display: block;
    // height:100rpx;
    overflow: hidden;
  }

  .top-box {
    width: 100%;
    padding: 30rpx;
    height: 120rpx;
    position: relative;

    .search-top {
      position: absolute;
      bottom: 20rpx;
    }
  }

  .inputs {
    height: 68rpx;
    // padding: 30rpx 0;
    width: 686rpx;
    float: left;
    // margin: 20rpx auto;
    color: #333;
    background: #f8f8f8;
    border-radius: 16rpx;
    position: relative;

    image {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      width: 34rpx;
      height: 34rpx;
    }

    .inputaty {
      width: 90%;
      height: 100%;
      line-height: 100%;
      text-indent: 00rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      position: absolute;
      left: 100rpx;
    }

    .placesty {
      height: 68rpx;
      // text-indent: 70rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 68rpx;
      color: #BFBFBF;
    }
  }

  .container-one {
    width: 100%;
    padding: 3%;

    .container-two {
      .weizhi-box {
        height: 80rpx;
        line-height: 80rpx;
        margin-top: 20rpx;
      }

      .weizhi {
        width: 228rpx;
        height: 80rpx;
        background: #FFFFFF;
        text-align: center;
        line-height: 80rpx;

      }

      .weizhi1 {
        height: 80rpx;
        line-height: 80rpx;
        color: #0082F2;
      }

      .weizhiitem {
        margin-top: 20rpx;
        width: 228rpx;
        height: 80rpx;
        background: #FFFFFF;
        text-align: center;
        line-height: 80rpx;
        margin-left: 8upx;
      }

      .weizhiitem:nth-of-type(3n+1) {
        margin-left: 0upx;
      }

      .weizhidel {
        width: 28rpx;
        height: 28rpx;

        image {
          width: 100%;
          height: 100%;
        }
      }
    }
  }

  .choose-box {
    width: 100%;
    height: auto;
  }

  .weizhi-boxs {
    height: auto;
  }
</style>
